<template>
    <div id="app">
        <router-view
            class="page"
            :transition="direction">
        </router-view>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        replace: false,
        data() {
            return {
                direction: 'forward'
            }
        },
        ready() {
            this.$router.records = [];

            this.$router.forward = path => {
                var state = this.$router.stringifyPath(this.$route);
                this.$router.records.push(state);

                this.$router.go(path);
            };

            this.$router.back = path => {
                var state = this.$router.stringifyPath(path);
                var index = this.$router.records.length - 1;
                var last = this.$router.records[index];

                if (last && last === state) {
                    history.back();
                    this.$router.records.pop();
                } else {
                    this.$router.replace(path);
                }
            };

            this.$router.beforeEach(t => {
                var fd = t.from.depth || 0;
                var td = t.to.depth || 0;

                if (!t.from.path) {
                    this.$root.$data.direction = 'load';
                } else if (fd <= td) {
                    this.$root.$data.direction = 'forward';
                } else if (fd > td) {
                    this.$root.$data.direction = 'back';
                }

                this.$nextTick(() => t.next());
            });
        }
    }
</script>

<style rel="stylesheet/less" lang="less">
    @import "~vmc/styles/vmc.less";

    .page {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        background: #F4F4F4;
        -webkit-overflow-scrolling: touch;
        font-family: "PingFang SC", "Microsoft YaHei", Helvetica Neue,Helvetica,Arial,sans-serif;
        font-weight: normal;
    }

    /*转场动画*/
    .forward-transition {
        transition: all .4s ease;
    }

    .back-transition {
        transition: all .4s ease;
    }

    .load-transition {
        /*transition: all .4s ease;*/
    }

    .forward-enter {
        transform: translate3d(100%, 0, 0);

    }

    .forward-leave {
        transform: translate3d(-100%, 0, 0);
    }

    .back-enter {
        transform: translate3d(-100%, 0, 0);
    }

    .back-leave {
        transform: translate3d(100%, 0, 0);

    }

    .load-enter {
        transform: translate3d(0, 100%, 0);
    }

    .load-leave {
        transform: translate3d(0, -100%, 0);
    }

    .replace-enter {
        transform: translate3d(0, -100%, 0);
    }

    .replace-leave {
        transform: translate3d(0, 100%, 0);
    }
</style>